<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>用户信息</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件状态" name="2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="状态">
              <el-radio-group v-model="data.is_open">
                <el-radio :label="1">开通</el-radio>
                <el-radio :label="2">未开通</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item
          :title="
            data.is_open == 1 ? '开通时卡片背景样式' : '未开通时卡片背景样式'
          "
          name="3"
        >
          <el-form size="medium" label-width="100px">
            <div v-if="data.is_open == 1">
              <el-form-item label="卡片样式">
                <el-radio-group v-model="data.type.card_type">
                  <el-radio :label="1">渐变色</el-radio>
                  <el-radio :label="2">图片</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="卡片颜色" v-if="data.type.card_type == 1">
                <ColorPicker
                  :color="data.color"
                  :name="'card_bg_color_f'"
                ></ColorPicker>
                <ColorPicker
                  :color="data.color"
                  :name="'card_bg_color_l'"
                ></ColorPicker>
              </el-form-item>
              <el-form-item label="卡片图" v-if="data.type.card_type == 2">
                <div class="upload_img">
                  <Upload
                    :tempUrl="data.card_img"
                    @input="getCardBgImg"
                  ></Upload>
                </div>
                <div style="color:#999">建议分辨率345*136</div>
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="卡片样式">
                <el-radio-group v-model="data.type.card_type_open">
                  <el-radio :label="1">渐变色</el-radio>
                  <el-radio :label="2">图片</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="卡片颜色" v-if="data.type.card_type_open == 1">
                <ColorPicker
                  :color="data.color"
                  :name="'card_bg_color_f_open'"
                ></ColorPicker>
                <ColorPicker
                  :color="data.color"
                  :name="'card_bg_color_l_open'"
                ></ColorPicker>
              </el-form-item>
              <el-form-item label="卡片图" v-if="data.type.card_type_open == 2">
                <div class="upload_img">
                  <Upload
                    :tempUrl="data.card_img_open"
                    @input="getOpenCardBgImg"
                  ></Upload>
                </div>
                <div style="color:#999">建议分辨率345*136</div>
              </el-form-item>
            </div>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="基础样式" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="头像形状">
              <el-radio-group v-model="data.type.avart_type">
                <el-radio :label="1">圆形</el-radio>
                <el-radio :label="2">圆角</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景颜色">
              <ColorPicker :color="data.color" :name="'bg_color'"></ColorPicker>
            </el-form-item>
            <el-form-item label="进度条色">
              <ColorPicker
                :color="data.color"
                :name="'progress_color'"
              ></ColorPicker>
            </el-form-item>

            <el-form-item label="数字颜色">
              <ColorPicker
                :color="data.color"
                :name="'card_num_color'"
              ></ColorPicker>
            </el-form-item>
            <el-form-item label="文字颜色">
              <ColorPicker
                :color="data.color"
                :name="'card_font_color'"
              ></ColorPicker>
            </el-form-item>
            <el-form-item label="按钮背景色">
              <ColorPicker
                :color="data.color"
                :name="'card_rule_color'"
              ></ColorPicker>
            </el-form-item>
            <el-form-item label="按钮文字色">
              <ColorPicker
                :color="data.color"
                :name="'card_rule_btn_color'"
              ></ColorPicker>
            </el-form-item>
            <el-form-item label="会员等级背景色">
              <ColorPicker
                :color="data.color"
                :name="'card_round_color_f'"
              ></ColorPicker>
              <ColorPicker
                :color="data.color"
                :name="'card_round_color_l'"
              ></ColorPicker>
            </el-form-item>
            <el-form-item label="会员等级色">
              <ColorPicker
                :color="data.color"
                :name="'card_grade_color'"
              ></ColorPicker>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from "@/components/ColorPicker/index";
import Upload from "@/components/Upload/SingleImage2";
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeNames: ["1", "2", "3"]
    };
  },
  components: {
    ColorPicker,
    Upload
  },
  methods: {
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.linkdata = item;
    },
    getimg(img) {
      this.data.imgbg = img;
    },
    //删除图标
    removeIcon(tag) {
      this.data.content[tag] = "";
    },
    selecticon(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showiconselcet();
    },
    geticon(data) {
      this.acivedata.icon = data;
    },
    addlist() {
      this.data.list.push({
        icon: "",
        linkdata: {
          link: "",
          name: "",
          id: "",
          type: ""
        },
        text: ""
      });
    },
    dellist(i) {
      this.data.list.splice(i, 1);
    },
    getCardBgImg(data) {
      this.data.card_img = data;
    },
    getOpenCardBgImg(data){
      this.data.card_img_open = data;
    }
  }
};
</script>

<style scoped lang="scss">
.upload_img {
  width: 120px;
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}

.img_div {
  width: 40px;
  height: 40px;
}

.img_box {
  div {
    width: 40px;
    height: 40px;
  }
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}

.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
</style>
